<template lang="pug">
  div#ChallengeText
    div.top-img
      div.top-header
        i.iconfont.icon-fanhui(@click="$router.push('/recommendation')")
        i.iconfont.icon-shoucang
      div.img-block
        img(:src="textData.topImg")
    div.text-details
      div.text-title {{textData.title}}
      div.text-author 文/{{textData.author}}
      div.text-content(v-html="textData.content") {{textData.content}}
      div.challenge-btn 立即参与
    div.join-block
      div.join-title 参与{{textData.joinNumber}}人
      div.join-column
        div.join-list(v-for="item in textData.joinData")
          div.join-head
            img(:src="item.joinHead")
          span.join-name {{item.joinName}}
    div.comment-block
      div.comment-title 评论
      div.status-column
        commentColumn(:columnData="textData.columnData",@showComment="showComment")
    div.bottom-operation
      input.input-text(type="text",placeholder="请输入内容...")
      div.bottom-icon
        span.icon-list(:class="[textData.ifLike ? 'highLight' : '']",@click="showLike")
          i.iconfont(:class="[textData.ifLike ? 'icon-xihuan-tianchong' : 'icon-xihuan']")
          span {{textData.likeNumber}}
        span.icon-list
          i.iconfont.icon-xiaoxi
          span {{textData.textColumnNumber}}
        span.icon-list
          i.iconfont.icon-fenxiang
</template>
<script>
  import commentColumn from '@/components/commentColumn.vue'

  export default {
    data() {
      return {
        textData: {
          topImg: require('@/assets/text/top-img.png'),
          title: '夜跑100天',
          author: '铁皮人',
          content: '文如其名，书中给我们讲述的都是一篇又一篇的鸡汤文，看完之后只是觉得里面讲述的主人公们都是充满了正能量，大多最后都收获了成功，但是真正能记住的却不多，印象最深刻的一篇就是：别总急着 将生活推翻重来。<br><br>' + '' +
          '对抗自己的心最辛苦，<br> ' +
          '然而只有对抗它，<br>' +
          '才是我们真正生活着努力着的证明。<br><br>' +
          '其实，仔细想一想，我们做了很多年的专业都没有做好，那么你换个行业重新开始就能做好了么？还不如踏踏实实的做好自己的本职行业，在这个行业不断的学习去提升自己。',
          columnData: [{
            userHead: require('@/assets/status/userHead.png'),
            userName: '铁皮人',
            contentTime: '2018-07-06 15:02',
            contentText: '文如其名，书中给我们讲述的都是一篇又一篇的鸡汤文，看完之后只是觉得里面讲述的主人公们都是充满了正能量，大多最后都收获了成功，但是真正能记住的却不多，印象最深刻的一篇就是：别总急着 将生活推翻重来。',
            commentNumber: 14,
            commentList: [{
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }, {
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }],
            ifComment: false
          }, {
            userHead: require('@/assets/status/userHead.png'),
            userName: '发条音乐',
            contentTime: '2018-07-01 15:02',
            contentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。',
            commentNumber: 14,
            commentList: [{
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }],
            ifComment: false
          }, {
            userHead: require('@/assets/status/userHead.png'),
            userName: '铁皮人',
            contentTime: '2018-07-06 15:02',
            contentText: '文如其名，书中给我们讲述的都是一篇又一篇的鸡汤文，看完之后只是觉得里面讲述的主人公们都是充满了正能量，大多最后都收获了成功，但是真正能记住的却不多，印象最深刻的一篇就是：别总急着 将生活推翻重来。',
            commentNumber: 14,
            commentList: [{
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }, {
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }, {
              commentUserName: '超超',
              commentText: '对抗自己的心最辛苦，然而只有对抗它，才是我们真正生活着努力着的证明。'
            }],
            ifComment: false
          }],
          likeNumber: '65',
          ifLike: false,
          textColumnNumber: '14',
          joinNumber: '12',
          joinData: [{
            joinHead: require('@/assets/text/joinHead/userHead.png'),
            joinName: '铁皮人'
          }, {
            joinHead: require('@/assets/text/joinHead/userHead.png'),
            joinName: '发条音乐人'
          }, {
            joinHead: require('@/assets/text/joinHead/userHead.png'),
            joinName: '铁皮人'
          }, {
            joinHead: require('@/assets/text/joinHead/userHead.png'),
            joinName: '发条音乐人'
          }]
        }
      }
    },
    methods: {
      showComment(index) {
        if (this.textData.columnData[index].ifComment) {
          this.textData.columnData[index].ifComment = false
        } else {
          this.textData.columnData[index].ifComment = true
        }
      },
      showLike() {
        if (!this.textData.ifLike) {
          this.textData.ifLike = true
          this.textData.likeNumber++
        }
      }
    },
    components: {
      commentColumn
    }
  }
</script>
<style scoped lang="less">
  #ChallengeText {
    .top-img {
      height: 200px;
      position: relative;
      overflow: hidden;
      .top-header {
        position: absolute;
        background: transparent;
        width: 100%;
        padding: 0;
        z-index: 9999;
        .icon-fanhui {
          color: #fff;
        }
        .icon-shoucang {
          position: absolute;
          color: #fff;
          right: 20px;
        }
      }
      .img-block {
        position: absolute;
      }
    }
    .text-details {
      background: #fff;
      padding: 20px;
      text-align: left;
      .text-title {
        font-size: 16px;
      }
      .text-author {
        font-size: 12px;
        color: #9c9c9c;
        margin-top: 10px;
      }
      .text-content {
        font-size: 12px;
        margin-top: 10px;
        line-height: 20px;
      }
      .challenge-btn {
        background: #080c15;
        height: 35px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 35px;
        margin-top: 10px;
      }
    }
    .join-block {
      background: #fff;
      margin-top: 5px;
      .join-title {
        padding: 0 20px;
        text-align: left;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        border-bottom: 1px solid #f5f5f5;
      }
      .join-column{
        padding:10px 20px;
        overflow: hidden;
        .join-list{
          width: 50px;
          float: left;
          margin-right: 15px;
          .join-head{
            height: 50px;
            width: 50px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
          }
          .join-name{
            font-size: 12px;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 50px;
            display: inline-block;
            overflow: hidden;
          }
        }
      }
    }
    .comment-block {
      background: #fff;
      margin-top: 5px;
      .comment-title {
        padding: 0 20px;
        text-align: left;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        border-bottom: 1px solid #f5f5f5;
      }
    }
    .bottom-operation {
      position: fixed;
      bottom: 0;
      height: 45px;
      border-top: 1px solid #e6e6e6;
      width: 100%;
      background: #f5f5f5;
      .input-text {
        position: absolute;
        width: calc(100% - 180px);
        height: 25px;
        background: #fff;
        top: 10px;
        border: none;
        left: 20px;
        text-indent: 10px;
        outline: none;
        font-size: 12px;
        color: #9c9c9c;
      }
      .bottom-icon {
        float: right;
        padding: 0 20px;
        .icon-list {
          line-height: 45px;
          * {
            color: #9c9c9c;
          }
          span {
            margin: 0 10px 0 5px;
          }
        }
        .highLight * {
          color: #ff658b;
        }
      }
    }
  }

</style>
